import React, { useEffect, useState, useCallback } from "react";
import { useLocation, Route } from "react-router-dom";
import Permissionsnav from "../../component/permissionsnav";
import Permissionsearch from "../../component/permissionsearch"; //搜索
import style from "../../style/permisscontent.module.scss";
import { renderRoutes } from "react-router-config";
import { searchall } from "../../api/User";
import moment from "moment";

const Accountmanage = (props) => {
  const loacltion = useLocation();
  const [list, setlist] = useState();
  const route =
    loacltion.pathname.split("/")[loacltion.pathname.split("/").length - 1];
  const [routes, setroutes] = useState();
  const getallauth = useCallback(async () => {
    let res = await searchall();
    setlist(res.data.result);
    console.log(res);
  }, []);
  const stopAction = useCallback(async (e, id) => {
    console.log(e.target.getAttribute("goodsid"), id);
    if (id === 0) {
      id = 1;
    } else {
      id = 0;
    }
  }, []);
  const deleteAction = useCallback(async (e) => {
    console.log(e.target.getAttribute("goodsid"));
  }, []);
  const gofixed = useCallback(async (e) => {
    console.log(e.target.getAttribute("goodsid"));
  }, []);
  useEffect(() => {
    setroutes(route);
    getallauth();
  }, [route, getallauth]);
  return (
    <div className={style.Box}>
      <Route
        exact
        path="/permissions/accountmanage"
        component={() => {
          return (
            <>
              <Permissionsnav route={routes}></Permissionsnav>
              <Permissionsearch
                value={"账号名称"}
                text={"添加账号"}
                route={"addcount"}
                type={"account"}
              ></Permissionsearch>
              <table className={style.department}>
                <thead>
                  <tr>
                    <th>账号名称</th>
                    <th>创建时间</th>
                    <th>账号人员</th>
                    <th>启用状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {list?.map((item, index) => {
                    return (
                      <tr key={index}>
                        <td style={{ width: "195px" }}>{item.username}</td>
                        <td style={{ width: "301px" }}>
                          {item.time
                            ? moment(Number(item.time)).format(
                                "YYYY-MM-DD HH:mm:ss"
                              )
                            : "2023-06-18 13:25:45"}
                        </td>
                        <td style={{ width: "160px" }}>查看</td>
                        <td style={{ width: "233px" }}>
                          {item.type === "1" ? "已启用" : "已停用"}
                        </td>
                        <td style={{ width: "168px" }}>
                          <span
                            goodsid={item._id}
                            style={{ cursor: "pointer" }}
                            onClick={(e) => stopAction(e, item.type)}
                          >
                            {item.type === 1 ? "停用" : "启用"}
                          </span>{" "}
                          <sapn
                            goodsid={item._id}
                            style={{ cursor: "pointer" }}
                            onClick={(e) => deleteAction(e)}
                          >
                            删除
                          </sapn>{" "}
                          <span
                            goodsid={item._id}
                            style={{ cursor: "pointer" }}
                            onClick={(e) => gofixed(e)}
                          >
                            编辑
                          </span>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </>
          );
        }}
      />
      {renderRoutes(props.route.routes)}
    </div>
  );
};

export default Accountmanage;
